﻿<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="full-screen" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<script type="text/javascript">
			window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {
				function c() {
					var d = document.documentElement;
					var cw = d.clientWidth || 750;
					d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
				}
				c();
				return c;
			})(), false);
		</script>
		<title>最新计费方式</title>
		<style>
			* {
				margin: 0;
				padding: 0
			}
			
			body {
				padding: 0.5rem;
				padding-bottom: 2.5rem;
				padding-top: 2.2rem;
			}
			
			.blank {
				width: 100%;
				height: 3.0rem;
			}
			
			#yi table {
				border: 0.05rem solid #ccc;
				width: 100%;
				border-bottom: none;
			}
			
			#er table {
				border: 0.05rem solid #ccc;
				width: 100%;
				border-bottom: none;
				border-top: none;
			}
			
			.title {
				text-align: center;
				font-size: 0.75rem;
				color: #5cc2d0;
				line-height: 1.25rem;
			}
			
			td {
				text-align: center;
				font-size: 0.6rem;
				color: #6c6c6c;
				line-height: 1.5rem;
				border-bottom: 0.05rem solid #ccc;
				border-right: 1px solid #ccc;
			}
			
			tr td:last-child {
				border-right: none;
			}
			/*-----------------------------------------*/
			 
			.inf div:nth-child(1) {
				text-align: center;
				font-size: 0.7rem;
				color: rgb(79, 129, 189);
				line-height: 1.5rem;
				border: 0.05rem solid #ccc;
				border-top: none;
			}
			
			.inf div:nth-child(2) {
				text-align: center;
				font-size: 0.6rem;
				color: #6c6c6c;
				line-height: 1rem;
				border: 0.05rem solid #ccc;
				border-top: none;
			}
			
			.inf div:nth-child(3) {
				text-align: center;
				font-size: 0.6rem;
				color: rgb(201, 115, 137);
				line-height: 1rem;
				border: 0.05rem solid #ccc;
				border-top: none;
			}
			
			#oth {
				border-right: none;
			}
			
			a {
				color: #6c6c6c;
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<div id="yi">
			<table cellpadding="0" cellspacing="0">
				<tr id="first">
					<td class="title">地区</td>
					<td class="title">行程</td>
					<td class="title">白天</td>
					<td class="title">晚上</td>
				</tr>

				<!-- 在此之后添加如下样式的循环 -->
				<!--<tr>
					<td>郑州</td>
					<td>
						<a href="">中牟-郑州</a> <br>
						<a href="">荥阳-西流湖</a> <br>
					</td>
					<td>16</td>
					<td>26 </td>
				</tr>-->

			</table>
		</div>

		<!-- 其他计算方式 -->
		<div id="er">
			<table cellpadding="0" cellspacing="0" id="ert">
				<tr>
					<td colspan="3" id="oth">其他路线计算方式，以高德地图实际行驶路线为准。</td>
				</tr>
				<tr>
					<td></td>
					<td class="title">05:00-20:00 <br> (往返价格)</td>				
					<td class="title">20:00-05:00<br> (往返价格)</td>					
				</tr>
				<tr>
					<td>公里</td>
					<td>运算方式</td>				
					<td>运算方式</td>				
				</tr>
				<!-- 接口写好之后就在这个后面添加如下循环 -->
				<!--<tr>
					<td>0-50</td>
					<td>距离*0.5+10</td>
					<td>距离*0.5+20</td>
				</tr>-->

			</table>
		</div>

		<div class="inf">
			<div>稍件计算价格标准</div>
			<div>
				<span>平台稍送物品按照高德地图实际行驶距离收费</span> <br>
				<span class="price">（0-200公里起步价10元每公里0.20元），（200公里以上起步价10元每公里0.15元）</span>。
			</div>
			<div>注：以上拼车、稍件每一单收取 <span class="bai">7％</span> 的平台服务费，直接从乘客支付中扣除。</div>
		</div>

		<!--===============- -->
		<div class="blank"></div>
	</body>
</html>
<script src="jquery-2.2.4.min.js"></script>
<script>
	var key = "a5226d8d9e3244060883adeb003c6063";
	$.ajax({
		type: "POST",
		url: "http://daxiangpinche.com/public/api/rates/index",
		async: false,
		data: {
			key: key
		},
		success: function(data) {

			console.log(data.data);
			
			//rares
			for(var i = 0; i < data.data.rares.length; i++) {

				var newtr = document.createElement("tr");
				newtr.innerHTML += "<td>" + data.data.rares[i][0] + "</td>"
				document.querySelector('table').appendChild(newtr);

				var newtd = document.createElement('td');
				var newtd3 = document.createElement('td');
				var newtd4 = document.createElement('td');

				for(var j = 0; j < data.data.rares[i][1].length; j++) {

					var newa = document.createElement('a');
					var newp1 = document.createElement('p');
					var newp2 = document.createElement('p');

					newa.innerHTML += data.data.rares[i][1][j].area + "</br>";
					newtd.appendChild(newa);
					newtr.insertBefore(newtd, null);

					newp1.innerHTML += data.data.rares[i][1][j].daytime + "</br>";
					newtd3.appendChild(newp1);
					newtr.insertBefore(newtd3, null);

					newp2.innerHTML += data.data.rares[i][1][j].night + "</br>";
					newtd4.appendChild(newp2);
					newtr.appendChild(newtd4);

					document.querySelector('#yi table').appendChild(newtr);
				};
			};

			//稍件数据
			var sjData = data.data.shaojian[0];
			var sjData2 = data.data.shaojian[1];
			var sjData3 =Math.floor( (data.data.pingtaifwf - 0 )* 100);
			document.getElementsByClassName("price")[0].innerHTML =
				"<span class='price'>（" + sjData.begin + "-" + sjData.end + "公里起步价" + sjData.initiate_price + "元每公里" + sjData.unit_price + "元），（" + sjData2.begin + "公里以上起步价" + sjData.initiate_price + "元每公里" + sjData2.unit_price + "元）</span>"
			document.getElementsByClassName("bai")[0].innerHTML = sjData3 + "%";

			//juli
			console.log(data.data.juli);
			var juliData = data.data.juli;
			for (var i=0;i<data.data.juli.length;i++) {
				console.log(data.data.juli[i]);
				var newtr = document.createElement("tr");
				newtr.innerHTML += "<td>" + juliData[i].begin + "-" + juliData[i].end + "</td>"
								+  "<td>" + "距离*" + juliData[i].unit_price + "+"+ juliData[i].add_price  +"</td>"
								+  "<td>" + "距离*" + juliData[i].unit_price + "+"+ juliData[i].night_add_ptice + "</td>";
				document.querySelector('#er table').appendChild(newtr);
			}
		}
	});
</script>